<template>
  <div class="orders">

  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/about' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>

  <el-card>
       <el-row :gutter="22">
      <el-col :span="6">
       <el-input placeholder="请输入内容" clearable  v-model="form.query" @clear="getlist" >
       <el-button slot="append" icon="el-icon-search" @click="getlist"></el-button>
       </el-input>
     </el-col>
     </el-row>

 <el-table
    :data="list"
    border
    style="width: 100%">
     <el-table-column
      type="index"
      label="#"
      >
    </el-table-column>
    <el-table-column
      prop="order_number"
      label="订单编号"
      >
    </el-table-column>
    <el-table-column
      prop="order_price"
      label="订单价格"
      >
    </el-table-column>
    <el-table-column
      prop="order_pay"
      label="是否付款">
      <template slot-scope="scope">
       <el-button type="success" plain v-if="scope.row.order_pay==='1'">已付款</el-button>
      
      <el-button type="warning" plain v-if="scope.row.order_pay==='0'">未付款</el-button>
       </template>
    </el-table-column>
     <el-table-column
      prop="is_send"
      label="是否发货">
    </el-table-column>
     <el-table-column
      prop="create_time"
      label="下单日期">
      <template slot-scope="scope">
        {{scope.row.create_time |dateFormat}}
      </template>
    </el-table-column>
     <el-table-column
      prop="update_time"
      label="下单时间">
        <template slot-scope="scope">
        {{scope.row.update_time |dateFormat}}
      </template>
    </el-table-column>
     <el-table-column
      prop="address"
      label="操作">
       <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-location-outline" circle></el-button>
    </el-table-column>
  </el-table>

 <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pagenum"
      :page-sizes="[1,2, 3,4, 5,6, 10,20]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
 </el-card>

  </div>
</template>
<script>

  
export default {

  data() {
    return{
       form:{
       query :'' ,
       pagenum:1  ,
       pagesize:6
      },
      list:[]
    }
  },
  components:{
   
  },
  created(){
     this.getlist()
  },
  methods:{
   async getlist(){
      const {data:res}=await this.$http.get('orders',{params:this.form})
      console.log(res.data.goods);
      this.list=res.data.goods
    },
    handleSizeChange(val){
      this.form.pagesize=val
      this.getlist()
    },
    handleCurrentChange(val){
       this.form.pagenum=val
       this.getlist()
    }

  }
}
</script>


<style lang="less" scoped>
.el-card{
  margin-top: 30px;
}
.el-table{
  margin-top: 30px;
}
</style>
